<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="../images/hanhong.png" alt=""><br>
    <button>换一个</button>

    <script>
        // 思路：
        // 1. 用语言描述一下你要干什么：
              // 点击按钮，将图片中的韩红变成金星
        // 2. 将干的内容进行拆分步骤：
              // 1. 获取按钮元素
              // 2. 绑定事件
              // 3. 切换图片：
              //    3-1. 获取图片元素
              //    3-2. 修改src属性为金星图片路径

        // 3. 给每一个步骤罗列技术实现方式：
              // 1. 获取相关元素：
              /**
               * document.querySelector    
               * document.querySelectorAll   X
               * document.getElementById     X
               * document.getElementsByTagName X
               * document.getElementsByClassName  X
               * 
               */
              // 2. 绑定事件
              // 事件对象.onclick = function(){}

              // 3. 切换图片路径==>修改img元素标签的src属性

              
        // 实现步骤：
        // 1. 获取相关元素：
        var oBtn = document.querySelector('button');
        var oImg = document.querySelector('img');

        // 2. 绑定事件
        // 创建一个标识位：来区分是韩红还是金星
        var flag = true; // true表示当前是韩红要换成金星，false表示当前是金星换成韩红
        oBtn.onclick = function(){
            // 3. 修改img元素的src属性
            // console.dir(oImg);
            // oImg.src = '../images/jinxing.png'

            // if(flag){
            //     oImg.src = '../images/jinxing.png'
            // }else{
            //     oImg.src = '../images/hanhong.png'
            // }

            oImg.src = flag ? '../images/jinxing.png' : '../images/hanhong.png';
            flag = !flag;
        }
              
    </script>
</body>
</html>